let layer = layui.layer
let form = layui.form;

// =====================获取文章类别数据=====================

function getArticleCate() {
  axios.get(`/my/article/cates`).then(({ data: { data } }) => {
    const htmStr = data.map(({ name, alias, Id }) => {
      return `
      <tr>
          <td>${name}</td>
          <td>${alias}</td>
          <td>
          <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id=${Id}>编辑</button>
          <button type="button" class="layui-btn layui-btn-xs layui-btn-danger btn_delete" data-id=${Id}>删除</button>
          </td>
      </tr>
      `
    }).join(``)
    $(`#tbody`).html(htmStr)
  })
}

getArticleCate()

// =====================添加功能=====================
//添加显示框内容
let addFormStr = `<form id="addForm" class="layui-form">
<!-- 第一行 分类名称 -->
<div class="layui-form-item">
    <label class="layui-form-label">分类名称</label>
    <div class="layui-input-block">
      <input type="text" name="name" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div>
<!-- 第二行 分类别名  -->
<div class="layui-form-item">
    <label class="layui-form-label">分类别名</label>
    <div class="layui-input-block">
      <input type="text" name="alias" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
</div>
</div>
<!-- 第三行 按钮 -->
<div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>`



let indexAddForm  //声明的变量
$(`#btnAddCate`).on(`click`, function () {
  indexAddForm = layer.open({
    content: addFormStr,//添加显示框内容
    type: 1,
    title: `添加文章分类`,
    area: ['500px', '250px']
  });
})


//弹出框添加分类功能-发送axios请求
//直接表单的submit事件注册写法有问题==>由于form表单是动态创建的，所以以下不对，需要使用到事件委托方法
$(`body`).on(`submit`, `#addForm`, function (e) {
  e.preventDefault()
  const data = $(this).serialize()

  axios.post(`/my/article/addcates`, data).then(({ data: { status, message } }) => {
    // console.log(res);
    if (status !== 0) {
      return layer.msg(message)
    }
    layer.close(indexAddForm) //关闭弹窗
    getArticleCate()
    layer.msg(`新增文章类别成功`)

  })

})

// =====================编辑功能======================
//修改文章显示框内容
let addEditStr = `
<form id="editForm" class="layui-form" lay-filter="editForm">
       <!-- 第一行 分类名称Id -->
        <div class="layui-form-item layui-hide" >
          <label class="layui-form-label">分类名称Id</label>
          <div class="layui-input-block">
            <input type="text" name="Id" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第一行 分类名称 -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类名称</label>
          <div class="layui-input-block">
            <input type="text" name="name" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第二行 分类别名  -->
        <div class="layui-form-item">
          <label class="layui-form-label">分类别名</label>
          <div class="layui-input-block">
            <input type="text" name="alias" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>
        <!-- 第三行 按钮 -->
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">确认修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
`

//编辑功能
let indexEditForm  //声明的变量
$(`#tbody`).on(`click`, `.btn_edit`, function () {
  const Id = $(this).attr(`data-id`)
  //给表单赋值 //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
  axios.get(`/my/article/cates/${Id}`).then((res) => {
    form.val("editForm", res.data.data);
  })
  indexEditForm = layer.open({
    content: addEditStr,//添加显示框内容
    type: 1,
    title: `修改文章分类`,
    area: ['500px', '250px']
  });
})



//修改更新数据
$(`body`).on(`submit`, `#editForm`, function (e) {
  e.preventDefault()
  let data = $(this).serialize()
  axios.post(`/my/article/updatecate`, data).then(({data:{status,message}}) => {
    // console.log(res)
    if (status!==0) {
      return layer.msg(message)
    }
    layer.msg(`更新分类信息成功`)
    layer.close(indexEditForm)
    getArticleCate()
  })
})



// =====================删除功能======================

$(`#tbody`).on(`click`,`.btn_delete`,function () {
  const Id = $(this).attr(`data-id`)
  axios.get(`/my/article/deletecate/${Id}`).then(({data:{status,message}})=>{
     if (status!==0) {
      return layer.msg(message)
     }
     layer.msg(message)
     getArticleCate()
  })
})